<template>
  <div class="gz-checkbox-box">
    <input v-model="isCheck" type="checkbox" class="gz-checkbox" :disabled="disabled" @change="change" />
    <div>
      <div class="gz-checkbox-title">{{title}}</div>
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['title','disabled','selected'],
    model: {
      prop: 'selected',
      event: 'handleChange'
    },
    data() {
      return {
        isCheck: this.selected
      }
    },
    methods: {
      change(e) {
        this.$emit('handleChange',e.target.checked)
      }
    }
  }
</script>

<style scoped lang="less">
input[type=checkbox]{
  cursor: pointer;
  position:relative;
  width: 1.6rem;
  height:1.6rem;
  font-size: 1.2rem;
}
input[type=checkbox]::after{
  position: absolute;
  top:0;
  Color: var(--primary-color);
  width: 1.6rem;
  height: 1.6rem;
  line-height: 1.6rem;
  display: inline-block;
  visibility:visible;
  padding-left:0px;
  text-align:center;
  content:' ';
  border-radius:0.1rem;
}
input[type=checkbox]:checked::after{
  content:"✓";
  color: #fff;
  font-size: 1.2rem;
  font-weight: bold;
  background-color: var(--primary-color);
}
</style>
